<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition>

  <!-- idAutocomplete deve ser informado o id do componente -->
  <!-- form deve ser informado o formulario na qual se encontra o componente -->
  <!-- value deve ser informado o valor do campo -->
  <!-- disabled deve ser informado um boolean, caso passado true o campo é disabilitado -->
  <!-- customClass deve ser informado a classe css desejada no componente -->
  <!-- autocompleteBinding é a forma de acessar o binding do inputText -->
  <h:inputText id="#{idAutocomplete}" value="#{value}" disabled="#{disabled}" styleClass="#{customClass}" binding="#{autocompleteBinding}"/>
  
  <!-- Importação do AutoComplete.js -->
  <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/autoComplete/js/AutoComplete.js"></script>

  <script type="text/javascript">

  // Criando Json que sera preechido com os valores passados pelo usuario.
  	var config = {};

  	// Verificando se o select não esta vazio e atribuindo ao Json o valor.
  	<c:if test="#{not empty select}">
  	
    	$.extend(config,{"select":#{select}});
  	
  	</c:if>

 	// Verificando se o autoFocus não esta vazio e atribuindo ao Json o valor.
	<c:if test="#{not empty autoFocus}">

	    $.extend(config,{"autoFocus":#{autoFocus}});
	  
	</c:if>
	
	// Verificando se o appendTo não esta vazio e atribuindo ao Json o valor.
	<c:if test="#{not empty appendTo}">

		$.extend(config,{"appendTo":#{appendTo}});

	</c:if>

	// Verificando se o delay não esta vazio e atribuindo ao Json o valor.
	<c:if test="#{not empty delay}">

		$.extend(config,{"delay":#{delay}});

	</c:if>

	// Verificando se o minLength não esta vazio e atribuindo ao Json o valor.
	<c:if test="#{not empty minLength}">

		$.extend(config,{"minLength":#{minLength}});

	</c:if>

	// Recebendo o valor da position passada pelo usuario.
	var position = "#{position}";

	// Verificando se o position não esta vazio e atribuindo ao Json o valor.
	<c:if test="#{not empty position}">

		// Montando a lista a direita na parte inferior.
		if($.trim(position) == "right bottom"){

			$.extend(config,{"position":{"my":"left top","at":"right top","collision":"none"}});
			
		}
		// Montando a lista a direita na parte superior.
		if($.trim(position) == "right top"){

			$.extend(config,{"position":{"my":"left bottom","at":"right bottom","collision":"none"}});
			
		}
		// Montando a lista a esquerda na parte inferior.
		if($.trim(position) == "left bottom"){

			$.extend(config,{"position":{"my":"right top","at":"left top","collision":"none"}});
			
		}
		// Montando a lista a esquerda na parte superior.
		if($.trim(position) == "left top"){

			$.extend(config,{"position":{"my":"right bottom","at":"left bottom","collision":"none"}});
			
		}
		// Montando a lista abaixo na parte inferior.
		if($.trim(position) == "bottom"){

			$.extend(config,{"position":{"my":"left top","at":"left bottom","collision":"none"}});
			
		}
		// Montando a lista abaixo na parte superior.
		if($.trim(position) == "top"){

			$.extend(config,{"position":{"my":"left bottom","at":"left top","collision":"none"}});
			
		}


	</c:if>

  // Chamando o JavaScript e modificando os valores Default pelos informado pelo usuario.
  var autoComplete = new AutoComplete();
  
  autoComplete.adicionarAtributo(config);

  // Variavel className deve conter o fqn da Classe que deseja buscar os dados.
  var className = "#{className}";
  // Variavel columnName deve conter o nome da coluna presente os valores da busca.
  var columnName = "#{columnName}";
  // Variavel columnStatusName deve conter o nome da coluna status da classe Status.
  var columnStatusName = "#{columnStatusName}";
  // Variavel columnStatusValue deve conter o valor que sera feito a busca.
  var columnStatusValue = "#{columnStatusValue}";
  // Variavel atributeStatusName deve conter o nome da coluna status da sua Classe.
  var atributeStatusName = "#{atributeStatusName}";
  // Variavel keyField deve conter a chave do JSON de retorno, ex: ID
  var keyField = "#{keyField}";
  // Variavel keyValue deve conter o valor do JSON de retorno, ex: NOME
  var keyValue = "#{keyValue}";

  // If para verificar se o usuario passou os 3 valores necessarios para busca por status.
  <c:if test="#{empty columnStatusName or empty columnStatusValue or empty atributeStatusName}">

  	// Caso entre no if as 3 variavel são atribuida valores inativos e não usadas na busca de dados.
  	var columnStatusName = "vazio";
  	var columnStatusValue = 0;
  	var atributeStatusName = "vazio";

  </c:if>

  // Chamando o AutoComplete
  // Form deve conter o formulario na qual se encontra o autocomplete e idAutocomplete deve conter o id, montando assim um seletor.
  // "autocomplete" é o valor sendo ouvido na Servlet
  // Enviando o className, columnName, columnStatusName, columnStatusValue, atributeStatusName , keyField, keyValue ja com valores.
  // A função é rodada em um foreach com os seguintes dados informados:
  autoComplete.autoComplete("#" + "#{form}" + "\\:" + "#{idAutocomplete}", className, columnName, columnStatusName, columnStatusValue, atributeStatusName , keyField, keyValue, function(campo){
	   
		return{

			// Label -> O que vai estar na apresentacao em cada item da lista.
			label:campo.#{labelField},
			// Value - > Valor que sera atribuida ao campo ao selecionar.
			value:campo.#{valueField}
			
		};
		
	});

  // Para poder modificar o CSS do container e da lista, o seletor busca o length para procurar quantos componentes autocomplete a tela possui e armazena em uma variavel.
  var num = $(".ui-autocomplete").length;

  // Usando o prefixo ui-id- + a varivel contador para ter acesso ao container e colocar a classe css informada em customListClass.
  $("#ui-id-" + num).addClass('#{customListClass}');

  // Zerando os valores.
  <c:set var="select" value=""/>
  <c:set var="autoFocus" value=""/>
  <c:set var="appendTo" value=""/>
  <c:set var="delay" value=""/>
  <c:set var="minLength" value=""/>
  <c:set var="position" value=""/>
  <c:set var="columnStatusName" value=""/>
  <c:set var="columnStatusValue" value=""/>
  <c:set var="atributeStatusName" value=""/>
  <c:set var="customClass" value=""/>
  <c:set var="customListClass" value=""/>
  <c:set var="customItemListClass" value=""/>
  
  </script>

</ui:composition>   
   
</html>